<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import ThemeToggle from '@/components/ThemeToggle.vue'
import { ElMessage } from 'element-plus'

// 引入性能监视器stats.js
import Stats from 'three/addons/libs/stats.module.js';
// 创建stats对象
const stats = new Stats();
// 创建性能监视器类型
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
// 将stats对象添加到DOM中
// document.body.appendChild(stats.dom);
let renderId: number | null = null;
// 渲染函数
const render = () => {
  // 性能监视器更新
  stats.update();
  // 继续动画循环
  renderId = requestAnimationFrame(render);
};
// 启动渲染循环
render();

const route = useRoute()
const router = useRouter()
const activeIndex = ref('/')

// 当路由变化时更新activeIndex
// 1.路由守卫
router.beforeEach((to, from, next) => {
  if (to.path !== from.path) {
    activeIndex.value = to.path
  }
  next()
})
// 或者
// 2.监听路由变化
watch(() => route.path, (newPath) => {
  activeIndex.value = newPath
}, { immediate: true })

const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const isShowNav = ref(true);
let lastScrollTop = 0;
const handleScroll = () => {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (currentScrollTop > lastScrollTop) {
    // 向下滚动
    isShowNav.value = false;
  } else {
    // 向上滚动
    if (currentScrollTop > 100) {
      isShowNav.value = true;
    } else {
      isShowNav.value = false;
    }
    isShowNav.value = true;
  }
  lastScrollTop = currentScrollTop;
};

onMounted(() => {
  ElMessage({
    message: '加载完成',
    type: 'success',
  })
  window.addEventListener('scroll', handleScroll);
})
// 组件卸载时清理
onUnmounted(() => {
  renderId && cancelAnimationFrame(renderId)
  renderId = null
  window.removeEventListener('scroll', handleScroll);
});
</script>
<template>
  <ThemeToggle class="fixed right-4 top-13 z-10" />
  <el-tooltip content="导航显示开关" placement="bottom" effect="light">
    <el-button circle class="fixed right-4 top-23 z-10" type="primary" @click="isShowNav = !isShowNav">{{ isShowNav ?
      'H'
      : 'S' }}</el-button>
  </el-tooltip>
  <transition name="el-fade-in-linear">
    <div class="nav-container" v-show="isShowNav">
      <el-menu mode="horizontal" :router="true" :default-active="activeIndex" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/3dCard">3d卡片示例</el-menu-item>
        <el-menu-item index="/canvasScrollClip">canvasScrollClip.js示例</el-menu-item>
        <el-menu-item index="/elementPlusDemo">Element Plus示例</el-menu-item>
        <el-menu-item index="/formInTable">表格表单</el-menu-item>
        <el-menu-item index="/GSAP">GSAP示例</el-menu-item>
        <el-menu-item index="/motionV">motion-v示例</el-menu-item>
        <el-menu-item index="/parallax">视差滚动示例</el-menu-item>
        <el-menu-item index="/photoFilter">图片滤镜示例</el-menu-item>
        <el-menu-item index="/swiper">swiper.js示例</el-menu-item>
        <el-menu-item index="/tsParticles">tsParticles示例</el-menu-item>
        <el-menu-item index="/vue3AutoScroll">vue3AutoScroll示例</el-menu-item>
        <el-menu-item index="/vue3SeamlessScroll">vue3SeamlessScroll示例</el-menu-item>
        <el-menu-item index="/vueuseCore">vueuse/core示例</el-menu-item>
      </el-menu>
    </div>
  </transition>
  <RouterView :key="$route.fullPath" />
</template>

<style scoped lang="scss">
.nav-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  background-image: radial-gradient(transparent 1px, #0000 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(100%) blur(0px); // 让元素后面区域添加图形效果
  mix-blend-mode: normal; // 混合模式，normal为正常，用于处理背景透明的元素
  filter: blur(0px); // 元素自身滤镜，模糊效果

  .el-menu--horizontal {
    --el-menu-horizontal-height: 36px;

    .el-menu-item:nth-child(1) {
      margin-right: 0;
    }
  }
}
</style>
